import React from 'react'
import { browserHistory } from 'react-router';
import styles from './style.css';
import classNames from 'classnames';
import { createUser, login } from '../../actions';
import { connect } from 'react-redux';

class LoginPage extends React.Component {
    constructor(props) {
        super(props)
        this.state = { tab: 'login' }
    }
    render() {
        const { createUser, login } = this.props;
        const createNewUser = () => createUser(this.refs.email.value, this.refs.password.value)
        return (
            <div className={styles.content}>
                <h3>welcome login</h3>
                <div>
                    <button className={
                        classNames({
                            [styles.tab]: true,
                            [styles.current]: this.state.tab === 'login'
                        })} onClick={() => this.setState({tab: 'login'})}>login</button>
                    <button className={
                        classNames({
                            [styles.tab]: true,
                            [styles.current]: this.state.tab === 'register'
                        })
                    } onClick={ () => this.setState({tab: 'register'})}>register</button>
                </div>
                <div className={classNames({[styles.hidden]: this.state.tab === 'register'})}>
                    <input type="text" ref="uname" placeholder="email"/>
                    <input type="password" ref="pword" placeholder="password"/>
                    <button className={styles.submit} onClick={() => login(this.refs.uname.value, this.refs.pword.value)}>login</button>
                </div>
                <div className={classNames({[styles.hidden]: this.state.tab === 'login'})}>
                    <input ref="email" type="text" placeholder="email"/>
                    <input ref="password" type="password" placeholder="password"/>
                    <input ref="repassword" type="password" placeholder="repassword"/>
                    <button className={styles.submit} onClick={ createNewUser}>register</button>
                </div>
            </div>
        );
    }
}

function mapStateToProps (state) {
    return {}
}
function mapDispatchToProps (dispatch) {
    return {
        createUser: (email, password) => dispatch(createUser(email, password)),
        login: (name, p) => dispatch(login(name, p))
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(LoginPage)
